<!--
 * @Description: 列表详情
 * @Author: zhaoxiaoyang
 * @LastEditors: zhaoxiaoyang zhaoxiaoyang@byteluck.com
 * @Date: 2021-07-19 21:33:05
 * @LastEditTime: 2023-08-14 15:31:44
-->
<template>
	<div class="list-des">
		<template v-if="listData.data && listData.data.length">
      <div class="list-container">
        <div
          class="list-des-item"
          v-for="(item, index) in listData.data"
          :key="index"
          @click="handleOpenDetails(item)"
        >
          <div class="des-icon">
            <img :src="item.icon" alt="" />
          </div>
          <div class="item-text">
            <EllipsisTooltip :title="item.name" />
          </div>
        </div>
      </div>
		</template>
		<template v-else>
			<no-data class="list-no-data"></no-data>
		</template>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useHomeContext } from '@/entry_desktop/views/Home/hooks/useContext'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import NoData from '@/entry_desktop/components/NoData/NoData.vue'
import { useStore } from 'vuex'

import useListDescription from './useListDescription'
import { client } from '@/utils'
import './list.less'
import { iframePostMessage } from '@/utils/tabInnerPage'
export default defineComponent({
	name: 'list-description',
	props: {
		list: {
			type: Object,
			default: () => ({}),
		},
	},
	components: {
		EllipsisTooltip,
		NoData,
	},
	emits: ['updateList'],
	setup(props, { emit }) {
		const store = useStore()
		const params = useListDescription()
		const { homeEmitter } = useHomeContext()

		const listData = computed(() => {
			return props.list
		})
		const appLauncher = computed(
			() => store.state.tenant?.tenant_auth?.app_launcher === 1
		)
		const handleOpenDetails = async (arg: any) => {
			if (appLauncher.value) {
				iframePostMessage(arg, 'recentlyAndStar')
			} else {

			let targetWindow
			if(arg.link.indexOf('?')>-1){
				targetWindow = client.openWindow(
					arg.link + `&appLauncher=${appLauncher.value}`
				)
			}else{
				targetWindow = client.openWindow(
					arg.link + `?appLauncher=${appLauncher.value}`
				)
			}
				// let targetWindow = client.openWindow(
				// 	arg.link + `?appLauncher=${appLauncher.value}`
				// )
				iframePostMessage(arg, 'recentlyAndStar', targetWindow)
			}
			const flag = await params.saveRecent(arg.id)
			if (flag) {
				emit('updateList')
			}
			homeEmitter.emit('custom:fetchRecentList')
		}
		// 取消收藏事件
		const handleCancelFavorite = async (id: string, type = '0') => {
			const result = await params.saveFavorite(id, type)
			if (result) {
				emit('updateList')
			}
			homeEmitter.emit('custom:fetchList')
		}
		return {
			...params,
			listData,
			handleOpenDetails,
			handleCancelFavorite,
		}
	},
})
</script>
<style lang="less" scoped>
.list-des .list-des-item .stars-box{
	// background: url('@/assets/images/favorite_bg.svg');
}

.list-container {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行 */
  gap: 10px; /* 设置子元素之间的间距 */
  padding: 5px; /* 根据需要设置内边距 */
  height: 23vh;
  overflow: auto;
}

.list-des-item {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: center; /* 水平居中对齐子元素 */
  flex-direction: column; /* 子元素垂直排列 */
  gap: 5px; /* 设置子元素之间的间距 */
  height: 100px;
}

.des-icon img {
  width: 50px; /* 设置图片宽度，根据需要调整 */
  height: auto; /* 保持图片宽高比 */
}

.item-text {
  text-align: center; /* 文字居中 */
  width: 105px;
}
</style>
